/****************************************************************************
*created by yang.zheng on 2020-08-20 for user regsiter file
****************************************************************************/

<template>
    <div class="register-container">
        <p>综合信息管理系统  登录</p>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="账户号" prop="userId">
                <el-col :span="24">
                    <el-input v-model="ruleForm.userId"></el-input>
                </el-col>
            </el-form-item><el-form-item label="姓名" prop="userName">
                <el-col :span="24">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-col>
            </el-form-item><el-form-item label="密码" prop="userPwd" >
                <el-col :span="24">
                    <el-input v-model="ruleForm.userPwd" type="password"></el-input>
                </el-col>
            </el-form-item><el-form-item label="确认密码" prop="confirmPwd" >
                <el-col :span="24">
                    <el-input v-model="ruleForm.confirmPwd" type='password'></el-input>
                </el-col>
            </el-form-item>
            
            <el-form-item label="性别" prop="userSex">
                <el-select v-model="ruleForm.userSex" placeholder="请选择您的性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日" prop="userDate">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.userDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-col :span="4">
                    <el-button type="info" @click="cancelEvt">取消</el-button>
                </el-col>
                <el-col :offset="12" :span="4">
                    <el-button type="primary" @click="submitForm('ruleForm')">确认提交</el-button>
                </el-col>
                
            </el-form-item>
        </el-form>
    </div>   
</template>

<script>

import ajax from '@/util/Ajax'

    export default {
        data () {
            var checkPwd = (rule, val, callback) => {
                    if (val !== this.ruleForm.userPwd) {
                        callback (new Error('两次输入密码不一致!'));
                    }
            }
            return {
                ruleForm: {
                userId: '',
                userName: '',
                userPwd: '',
                confirmPwd: '',
                userSex : '',
                userDate: '',
                },
                rules : {
                    userId: [
                        { required: true, message: '请输入账户名', trigger: 'blur'},
                        { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                    ],
                    userName: [{ required: true, message: '请输入姓名', trigger: 'blur'}],
                    userPwd: [
                        { required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    confirmPwd: [
                        { required: true, message: '请确认密码', trigger: 'blur'},
                        { validator : checkPwd, trigger: 'blur'}
                    ],
                    sex : [{required: true, message: '请选择性别', trigger: 'blur'}],
                    date: [{ required: true, message: '请输入生日', trigger: 'blur'}], 
                },
            }
        },
        methods : {
            cancelEvt () {
               this.$router.push('/login')
            },
            async submitForm (ruleForm) {
               let res = await ajax({
                    url : 'user/add',
                    data : this.ruleForm,
                    method : 'post'
               })
               if (res.code === 200) {
                   this.$message.success('注册成功，正在为您跳转至登录页面')
                   setTimeout(() => {
                       this.$router.push('/login')
                   }, 1000);
               }else {
                   this.$message.error('注册失败，请重试')
                   console.log(e)
               }
            }
        }
    }

</script>

<style lang="less" scoped>
    @import "@/styles/common";
    @import "@/styles/register";
    
</style>